<template>
  <div
    class="hdm1"
  >
    <div class="demo-image">
      <el-image class="hdm2" :src="imag1">
      </el-image>
    </div>
    <div class="hdm3" >
      <span class="hdm4" 
        >星光影城</span
      >
    </div>
    <div class="hdm5" >
      <span class="hdm6" @click="router.push('/DefaultMobile')">首页</span>
      <span
      class="hdm7"
        @click="router.push('/movieListMobile')"
        >电影</span
      >
      <span class="hdm8"  @click="buy">购票</span>
      <span  class="hdm8" @click="myOrder">我的观影</span>
      <span  class="hdm8" @click="myPush"
        >个性化电影推荐</span
      >
    </div>
    <div style="flex: 1"></div>
    <div class="hdm9" @click="fuc">
      <el-dropdown>
        <span class="el-dropdown-link" style="color: white; width: 80px">
          <el-icon class="el-icon--right">
            <UserFilled />
          </el-icon>
          <span class="hdm10" style="font-size: small">{{ user }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="toLogin">登录账号</el-dropdown-item>
            <el-dropdown-item @click="router.push('/Register')">注册账号</el-dropdown-item>
            <el-dropdown-item @click="router.push('/userInfo')">个人信息</el-dropdown-item>
            <el-dropdown-item @click="router.push('/updateUser')">修改信息</el-dropdown-item>
            <el-dropdown-item @click="quit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup>
import { onBeforeMount, ref } from 'vue'
import { UserFilled } from '@element-plus/icons-vue'
import router from '@/router'
import '@/assets/scss/userCom/Phone/hd.scss'
const imag1 = require('@/assets/jiangbei2.png')
const user = ref('登录/注册')

const fuc = () => {
  if (user.value === '登录/注册') router.push('/LoginMobile')
  else router.push('/userInfoMobile')
}
const toLogin = () => {
  sessionStorage.clear()
  router.push('/Login')
}
const quit = () => {
  sessionStorage.clear()
  user.value = '登录/注册'
}
const buy = () => {
  if (JSON.parse(sessionStorage.getItem('username')) !== null) {
    router.push('/Buy')
  } else {
    router.push('/Login')
  }
}
const myOrder = () => {
  if (JSON.parse(sessionStorage.getItem('username')) !== null) {
    router.push('/myOrder')
  } else {
    router.push('/Login')
  }
}
const myPush = () => {
  if (JSON.parse(sessionStorage.getItem('username')) !== null) {
    router.push('/moviePush')
  } else {
    router.push('/Login')
  }
}
onBeforeMount(() => {
  if (JSON.parse(sessionStorage.getItem('username')) !== null) {
    user.value = JSON.parse(sessionStorage.getItem('username'))
  }
})
</script>
<style lang="scss" scoped>
#el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

#el-icon-arrow-down {
  font-size: 12px;
}

#example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
